<script setup lang="ts">
import type { Role } from '@/api/role/type'
import type { FormInstance } from 'element-plus'
import { rolePage } from '@/api/role'
import { Refresh, Search } from '@element-plus/icons-vue'

const queryFormRef = ref(ElForm)
const updateDialogVisible = ref(false)
const isDisabled = ref(true)
const loading = ref(false)
const userList = ref<Role[]>()
const total = ref(0)

const roleSearch = reactive<Role>({
  id: undefined,
  name: '',
})

const updateDialogName = ref('新增角色')
// 刷新
function refreshUser() {

}
const updateFormRef = ref<FormInstance>()
const updateFormData = reactive<Role>({
  id: undefined,
  name: '',
})
const refresh: Role = {
  id: undefined,
  name: '',
}
const updateRules = computed(() => ({
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
  ],
  realName: [
    { required: true, message: '请输入真实姓名', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入联系号码', trigger: 'blur' },
  ],
}))
// 保存更新入口
function handleExecute(formEl: FormInstance | any) {
  if (updateFormData.id) {
    handleUpdate(formEl)
  }
  else {
    handleSave(formEl)
  }
}
// 保存
async function handleSave(formEl: FormInstance | any) {
  if (!formEl)
    return
  const isValid = await formEl.validate()
  if (!isValid)
    return
  ElMessageBox.confirm(
    '确认是否新增',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    Object.assign(updateFormData, refresh)
  }).catch(() => ElMessage.info('新增取消'))
}

// 更新
async function handleUpdate(formEl: FormInstance | any) {
  if (!formEl)
    return
  const isValid = await formEl.validate()
  if (!isValid)
    return
  ElMessageBox.confirm(
    '确认是否修改',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {

  }).catch(() => ElMessage.info('修改取消'))
}

// 加载查询
onMounted(() => {
  handleQuery()
})

// 查询
function handleQuery() {
  rolePage(roleSearch).then((pageResult) => {
    userList.value = pageResult.records
    total.value = pageResult.total
  })
}

// 重置
function handleRefresh() {
  queryFormRef.value.resetFields()
  handleQuery()
}

// 删除
function deleteByIds() {

}

const deletedId = ref<Role[]>([])

// 多选
function handleSelectionChange(val: Role[]) {
  isDisabled.value = !val.length
  deletedId.value = val
}

// 修改用户信息
function modifyUser(id: number) {

}

// 获取组织信息
function getOrganization(id: number) {

}

// 获取权限信息
function getPermission(id: number) {

}

// 改变页容量
function handleSizeChange(val: any) {
  roleSearch.pageSize = val
  handleQuery()
}

// 改变页码
function handleCurrentChange(val: any) {
  roleSearch.pageNo = val
  handleQuery()
}
</script>

<template>
  <div>
    <el-form ref="queryFormRef" :inline="true" :model="roleSearch" class="form-inline">
      <el-form-item label="角色编码" prop="code">
        <el-input v-model="roleSearch.id" placeholder="角色编码" />
      </el-form-item>
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="roleSearch.name" placeholder="角色名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="success" :icon="Search" @click="handleQuery">
          查询
        </el-button>
        <el-button type="warning" :icon="Refresh" @click="handleRefresh">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <el-form :inline="true" class="form-operate">
      <el-form-item>
        <el-button type="primary" size="small" plain @click="updateDialogVisible = true">
          新增
        </el-button>
        <el-button type="danger" size="small" plain :disabled="isDisabled" @click="deleteByIds">
          删除
        </el-button>
      </el-form-item>
    </el-form>
    <div class="table-container">
      <el-table
        v-loading="loading"
        :data="userList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="id"
          label="角色编码"
          width="200"
          align="center"
        />
        <el-table-column
          prop="name"
          label="角色名称"
          width="500"
          align="center"
        />
        <el-table-column fixed="right" label="操作" width="180" align="center">
          <template #default="scope">
            <el-button link type="primary" @click="modifyUser(scope.row.id)">
              修改
            </el-button>
            <el-button link type="primary" @click="getOrganization(scope.row.id)">
              组织
            </el-button>
            <el-button link type="primary" @click="getPermission(scope.row.id)">
              权限
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        :current-page="roleSearch.pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="roleSearch.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <div class="update">
      <el-dialog
        v-model="updateDialogVisible"
        :title="updateDialogName"
        width="500px"
        draggable
        @close="refreshUser()"
      >
        <el-form
          ref="updateFormRef"
          :model="updateFormData"
          :rules="updateRules"
        >
          <el-form-item label="角色名称" prop="name">
            <el-input
              v-model="updateFormData.name"
            />
          </el-form-item>
          <div class="dialog-footer">
            <el-button @click="updateDialogVisible = false">
              取消
            </el-button>
            <el-button type="primary" @click="handleExecute(updateFormRef)">
              提交
            </el-button>
          </div>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<style scoped>

</style>
